<template>
  <div class="file-manage-view">
    <div class="file-manage-seach">
      <div class="file-seach">
        <el-select v-model="clientsValue" placeholder="请选择应用" class="clients-select">
          <el-option
            v-for="item in clients"
            :key="item.clientId"
            :label="item.name"
            :value="item.clientId">
          </el-option>
        </el-select>
        <el-input placeholder="请输入内容" v-model="fileSeach" class="input-with-select">
          <el-button slot="append" @click="findFile">查询</el-button>
        </el-input>
      </div>
      <div class="batch-deletion">
        <el-button type="danger" @click="batchDeletion">批量删除</el-button>
      </div>
    </div>
    <div class="file-manage-table">
      <el-table
        :data="tableData"
        height="100%"
        border
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        @selection-change="checkBoxChange"
      >
        <el-table-column
          type="selection"
          align="center"
          width="40">
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="index"
          label="序号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="fname"
          label="文件名"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="ftype"
          label="文件类型"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="userId"
          label="用户id"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="clienId"
          label="应用名"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="prepath"
          label="缩略图"
        >
          <template slot-scope="scope">
            <img :src="getImg(scope.row)" width="40" height="40" alt="">
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button
              class="el-icon-download"
              size="mini"
              @click="downLoad(scope.$index, scope.row)">下载
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delFile(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="file-manage-paging">
      <el-pagination
        layout="total, sizes, prev, pager, next"
        background
        :page-size="pageSize"
        :total="total"
        :page-count="10"
        :page-sizes="[5, 10, 20, 40]"
        :current-page="currentPage"
        @current-change="changePage"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

  export default {

    components: {},
    name: "fileManageView",
    props: {
      tableData: {
        type: Array,
        default: []
      },
      total: {
        type: Number,
        default: 10
      },
      pageSize: {
        type: Number,
        default: 10
      },
      currentPage: {
        type: Number,
        default: 1
      },
      clients: {
        type: Array,
        default: []
      }
    },
    filters: {},
    computed: {},
    watch: {},
    data() {
      return {
        fileSeach: "",
        map: {
          "exe": ""
        },
        clientsValue: "",
        host: window.location.host,
        fileType: {
          doc: "doc",
          docx: "docx",
          exe: "exe",
          jar: "jar",
          jpg: "jpg",
          rar: "rar",
          txt: "txt",
          video: "video",
          xls: "xls",
          xlsx: "xlsx",
          zip: "zip"
        }
      }

    },
    created() {
    },
    mounted() {

    },
    methods: {
      changePage(page) {
        this.$emit('changePage', page);
      },
      sizeChange(num) {
        this.$emit('sizeChange', num);
      },
      downLoad(index, row) {
        this.$emit('downLoad', index, row);
      },
      delFile(index, row) {
        this.$emit('delFile', index, row);
      },
      findFile() {
        this.$emit('findFile', this.fileSeach, this.clientsValue);
      },
      getImg(row) {
        let path = row.httppath;
        if (path != "") {
          path = `http://${this.host}${row.httppath}`;
        }
        let img = this.fileType[row.ftype] || "file";
        return path || `./static/images/fileTypeImage/${img}.png`;
      },
      /**
       * 多选框选中的时候
       * @param selection 返回的参数
       */
      checkBoxChange(selection) {
        this.$emit('checkBoxChange', selection);
      },
      // 批量删除
      batchDeletion() {
        this.$emit('batchDeletion');
      }

    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./fileManage");
</style>
